<template>
  <div class="hotel-booking-form">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <!-- 房型信息 -->
      <div class="room-info">
        <h4>{{ room.name }}</h4>
        <div class="room-details">
          <span>{{ room.bedType }}</span>
          <span>{{ room.area }}㎡</span>
          <span>{{ room.breakfast ? '含早' : '不含早' }}</span>
        </div>
      </div>

      <!-- 入住日期 -->
      <el-form-item label="入住日期" prop="checkInDate">
        <el-date-picker
          v-model="formData.checkInDate"
          type="date"
          placeholder="选择入住日期"
          :disabled-date="disabledCheckInDate"
          @change="handleDateChange"
        />
      </el-form-item>

      <el-form-item label="离店日期" prop="checkOutDate">
        <el-date-picker
          v-model="formData.checkOutDate"
          type="date"
          placeholder="选择离店日期"
          :disabled-date="disabledCheckOutDate"
          @change="handleDateChange"
        />
      </el-form-item>

      <!-- 入住人信息 -->
      <el-form-item label="入住人" prop="guestName">
        <el-input v-model="formData.guestName" placeholder="请输入入住人姓名" />
      </el-form-item>

      <el-form-item label="手机号码" prop="guestPhone">
        <el-input v-model="formData.guestPhone" placeholder="请输入手机号码" />
      </el-form-item>

      <!-- 特殊要求 -->
      <el-form-item label="特殊要求">
        <el-input
          v-model="formData.specialRequests"
          type="textarea"
          :rows="3"
          placeholder="请输入特殊要求（选填）"
        />
      </el-form-item>

      <!-- 价格信息 -->
      <div class="price-info">
        <div class="price-item">
          <span class="label">房费</span>
          <span class="value">¥{{ totalRoomPrice }}</span>
        </div>
        <div class="price-item" v-if="hasDiscount">
          <span class="label">信用优惠</span>
          <span class="value discount">-¥{{ discountAmount }}</span>
        </div>
        <div class="price-item total">
          <span class="label">总计</span>
          <span class="value">¥{{ finalPrice }}</span>
        </div>
      </div>

      <!-- 信用优惠信息 -->
      <div class="credit-info" v-if="userCreditScore">
        <div class="credit-item" v-if="isDepositFree">
          <el-icon><Check /></el-icon>
          <span>信用分{{ userCreditScore }}分，享受免押金特权</span>
        </div>
        <div class="credit-item" v-if="hasPriceDiscount">
          <el-icon><Check /></el-icon>
          <span>信用分{{ userCreditScore }}分，享受房价{{ priceDiscount }}折优惠</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button @click="$emit('cancel')">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认预订</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue'

const props = defineProps({
  hotel: {
    type: Object,
    required: true
  },
  room: {
    type: Object,
    required: true
  },
  userCreditScore: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['submit', 'cancel'])

// 表单数据
const formRef = ref(null)
const formData = ref({
  checkInDate: '',
  checkOutDate: '',
  guestName: '',
  guestPhone: '',
  specialRequests: ''
})

// 表单验证规则
const rules = {
  checkInDate: [
    { required: true, message: '请选择入住日期', trigger: 'change' }
  ],
  checkOutDate: [
    { required: true, message: '请选择离店日期', trigger: 'change' }
  ],
  guestName: [
    { required: true, message: '请输入入住人姓名', trigger: 'blur' }
  ],
  guestPhone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
}

// 计算属性
const isDepositFree = computed(() => {
  return props.userCreditScore >= 700
})

const hasPriceDiscount = computed(() => {
  return props.userCreditScore >= 600
})

const priceDiscount = computed(() => {
  if (props.userCreditScore >= 700) return 8
  if (props.userCreditScore >= 600) return 9
  return 10
})

const hasDiscount = computed(() => {
  return hasPriceDiscount.value
})

const totalRoomPrice = computed(() => {
  if (!formData.value.checkInDate || !formData.value.checkOutDate) return 0
  const days = Math.ceil(
    (formData.value.checkOutDate - formData.value.checkInDate) / (1000 * 60 * 60 * 24)
  )
  return props.room.currentPrice * days
})

const discountAmount = computed(() => {
  if (!hasDiscount.value) return 0
  return totalRoomPrice.value * (1 - priceDiscount.value / 10)
})

const finalPrice = computed(() => {
  return totalRoomPrice.value - discountAmount.value
})

// 方法
const disabledCheckInDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7
}

const disabledCheckOutDate = (time) => {
  if (!formData.value.checkInDate) return true
  return time.getTime() <= formData.value.checkInDate.getTime()
}

const handleDateChange = () => {
  // 可以在这里添加日期变化时的其他逻辑
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    emit('submit', {
      ...formData.value,
      totalPrice: finalPrice.value,
      discountAmount: discountAmount.value,
      isDepositFree: isDepositFree.value
    })
  } catch (error) {
    ElMessage.error('请完善预订信息')
  }
}

// 监听日期变化
watch(
  () => formData.value.checkInDate,
  (newVal) => {
    if (newVal && formData.value.checkOutDate) {
      if (formData.value.checkOutDate <= newVal) {
        formData.value.checkOutDate = ''
      }
    }
  }
)
</script>

<style lang="scss" scoped>
.hotel-booking-form {
  .room-info {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;

    h4 {
      margin: 0 0 10px;
      font-size: 16px;
      color: #303133;
    }

    .room-details {
      display: flex;
      gap: 15px;
      color: #606266;
      font-size: 14px;
    }
  }

  .price-info {
    margin: 20px 0;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;

    .price-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: #606266;
      }

      .value {
        color: #303133;
        font-weight: 500;

        &.discount {
          color: #67c23a;
        }
      }

      &.total {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #ebeef5;

        .label {
          font-weight: bold;
        }

        .value {
          color: #f56c6c;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }

  .credit-info {
    margin: 20px 0;
    padding: 15px;
    background-color: #f0f9eb;
    border-radius: 4px;

    .credit-item {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #67c23a;
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }
}
</style> 